<template>
	<view class="cont">
		<view class="load">
			<text class="text"></text>
			<text class="spinner"></text>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.cont {
		position: fixed;
		z-index: 1024;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.load {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15%;
	}

	.load .text {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;
		font-size: 35rpx;
		text-transform: uppercase;
		color: #fff;
		animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
	}

	@keyframes text {
		0% {
			transform: scale(1, 1);
		}

		50% {
			transform: scale(.5, .5);
		}

		100% {
			transform: scale(1, 1);
		}
	}

	.spinner {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
	}

	@keyframes spinner {
		50% {
			border-radius: 30%;
			transform: scale(.5) rotate(360deg);
			background-color: $color-main;
		}

		100% {
			transform: scale(1) rotate(720deg);
			background-color: $color-main;
		}
	}

	.spinner:before,
	.spinner:after {
		content: "";
		position: relative;
		display: block;
	}

	.spinner:before {
		animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
		width: 100rpx;
		height: 100rpx;
		background-color: $color-main;
		border-radius: 10rpx;
		animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
	}

	.spinner:after {
		animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
		position: relative;
		bottom: -30rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #eee;
	}

	@keyframes shadow {
		50% {
			transform: scale(.5);
			background-color: rgba(#000000, .2);
		}
	}


	@keyframes icon {
		0% {
			transform: rotateX(0);
		}

		100% {
			transform: rotateX(180deg);
		}
	}
</style>
